<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no    ">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/demo.css">
    <link rel="stylesheet" href="./css/discover.css">
    <title>discover</title>
</head>

<body>
    <!-- header -->
    <header class="clearfix">
        <!-- <div class="logo fl"><img src="./img/logo.png" alt=""></div> -->
        <div class="back_button fl">
            <p>Back</p>
        </div>

        <div class="cityBar fr">
            <select name="" id="">
                <option value="">广州市</option>
                <option value="">深圳市</option>
            </select>
        </div>

        <div class="nameBar">
            <p>发现</p>
        </div>

        <div class="searchBar">
            <input type="text">
            <input type="image" src="./img/fangdajing.png">
        </div>

    </header>

    <!-- #main -->
    <div id="main">
        <!-- other search -->
        <div class="other_search">
            <div class="os_title"><p>大家都在搜</p></div>
            <div class="os_item">
                <div class="os_item_area"><p>寿司</p></div>
                <div class="os_item_area"><p>羽毛球</p></div>
                <div class="os_item_area"><p>火锅</p></div>
                <div class="os_item_area"><p>游泳馆</p></div>
                <div class="os_item_area"><p>电影</p></div>
                <div class="os_item_area"><p>周黑鸭</p></div>
                <div class="os_item_area"><p>KTV</p></div>
                <div class="os_item_area"><p>肯德基</p></div>
            </div>
        </div>

        <!-- discover -->
        <div class="discover">
            <!-- item1 -->
            <div class="discover_area">

                <div class="discover_title clearfix">
                    <div class="title_area fl clearfix">
                        <div class="icon_fire fl"><img src="./img/discover/fire.png" alt="" class="img_processing"></div>
                        <p>热门搜索</p>
                    </div>
                    <div class="for_more fr clearfix">
                        <div class="for_more_icon fr"><img src="./img/icon2.png" alt="" class="img_processing"></div>
                        <p class="fr">更多</p>
                    </div>
                </div>

                <div class="discover_content clearfix">
                    <div class="d_c_l content_img fl"><img src="./img/discover/food6.jpg" alt=""></div>
                    <div class="d_c_r fr">
                        <div class="d_c_r_t content_img"><img src="./img/discover/food7.jpg" alt=""></div>
                        <div class="d_c_r_b clearfix">
                            <div class="d_c_r_b_l content_img fl"><img src="./img/discover/food8.jpg" alt=""></div>
                            <div class="d_c_r_b_r content_img fr"><img src="./img/discover/food9.jpg" alt=""></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- item2 -->
            <div class="discover_area">

                    <div class="discover_title clearfix">
                        <div class="title_area fl clearfix">
                            <div class="icon_star fl"><img src="./img/discover/star.png" alt="" class="img_processing"></div>
                            <p>推荐搜索</p>
                        </div>
                        <div class="for_more fr clearfix">
                            <div class="for_more_icon fr"><img src="./img/icon2.png" alt="" class="img_processing"></div>
                            <p class="fr">更多</p>
                        </div>
                    </div>
    
                    <div class="discover_content2 d_c_2_area">
                        <div class="dc2_01 d_c_2_area"><img src="./img/discover/zhouheiya.jpg" alt="" class="img_processing"></div>
                        <div class="dc2_02 d_c_2_area"><img src="./img/discover/badminton.jpg" alt="" class="img_processing"></div>
                        <div class="dc2_03 d_c_2_area"><img src="./img/discover/pofeng.jpg" alt="" class="img_processing"></div>
                    </div>
                </div>
        </div>

    </div>
    <!-- footer -->
    <footer>
        <div class="menu">
            <div class="menu_area">
                <a href="./index.html">
                    <div class="menu_img"><img src="./img/home.png" alt="" class="img_processing"></div>
                    <div class="menu_name">
                        <p>首页</p>
                    </div>
                </a>
            </div>
            <div class="menu_area">
                <a href="./classify.html">
                    <div class="menu_img"><img src="./img/class.png" alt="" class="img_processing"></div>
                    <div class="menu_name">
                        <p>分类</p>
                    </div>
                </a>
            </div>
            <div class="menu_area">
                <a href="./discover.html">
                    <div class="menu_img"><img src="./img/discover/discover.png" alt="" class="img_processing"></div>
                    <div class="menu_name">
                        <p>发现</p>
                    </div>
                </a>
            </div>
            <div class="menu_area">
                <a href="./profile.html">
                    <div class="menu_img"><img src="./img/person.png" alt="" class="img_processing"></div>
                    <div class="menu_name">
                        <p>我的</p>
                    </div>
                </a>
            </div>
        </div>
    </footer>

    <script>


        document.body.style.height = window.innerHeight + "px";

        /*动态改变根元素字体大小*/
        function recalc() {
            // 获取客户端宽度
            var clientWidth = document.documentElement.clientWidth;
            if (!clientWidth) return;
            // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
            document.documentElement.style.fontSize = 100 * (clientWidth / 750) + 'px';

        }

        function initRecalc() {
            recalc();
            // if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
            var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
            if (!document.addEventListener) return;
            window.addEventListener(resizeEvt, recalc, false);
            document.addEventListener('DOMContentLoaded', recalc, false);
        }
        initRecalc();



    </script>
</body>

</html>